<template>
  <view class="loader" @click.stop>
    <view class="loader_cir">
      <view></view>
      <view></view>
      <view></view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  .loader_cir {
    position: absolute;
    margin: auto;
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    > view {
      width: 20rpx;
      height: 20rpx;
      background-color: #ff0000;

      border-radius: 50%;
      &:first-child {
        animation: scale 0.75s 0.12s infinite;
      }
      &:nth-child(2) {
        animation: scale 0.75s 0.24s infinite;
        margin: 0 8rpx;
      }
      &:nth-child(3) {
        animation: scale 0.75s 0.36s infinite;
      }
    }
  }
}
@keyframes scale {
  33% {
    transform: scale(0.3);
  }
  100% {
    transform: scale(1);
  }
}
</style>
